<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:76:"/www/wwwroot/moa.iccp.host/public/../application/index/view/index/index.html";i:1642075894;}*/ ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title><?php echo htmlentities($site['name']); ?></title>
        <link rel="shortcut icon" href="/assets/img/favicon.ico" />
        <!-- Bootstrap Core CSS -->
        <link href="/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/css/index.css" rel="stylesheet">
        <link rel="stylesheet" href="https://www.jq22.com/demo/Message202012080007/css/message.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <style>
        #mainbody {
            position: relative;
            width: 100%;
            min-height: auto;
            overflow-y: hidden;
            background: #f1f6fd;
            color: #474157;
            height: calc(100vh - 61px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #mainbody .header{
            height: 50px;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            border-radius: 20px;
            width: 400px;
        }

        .box{
            width: 350px;
            height: 310px;
            padding: 20px;
            margin: 10px;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
            display: flex ;
            flex-direction: column;
        }

        .tab-content {
            flex: 1;
        }

        .tab-pane {
            height: 100%;
        }

        .nav>li>a {
            position: relative;
            display: block;
            padding: 5px 5px;
        }

        .box-pane{
            height: 100%;
            display: flex ;
            flex-direction: column;
            justify-content: space-evenly;
        }

        .nav-pills li{
            width: 32%;
        }

        .nav-pills li a{
            text-align: center;
        }

        .c-button{
            height: 40px;
            background-color: #0a568c;
            width: 100%;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
            font-size: 17px;
            font-weight: 300;
            color: white
        }

        .c-button:active{
            background-color: #043b62;
        }

        .c-input input{
            height: 5vh;
            width: 100%;
            border-radius: 10px;
            padding: 8px;
            outline:none;
            border: 2px solid #c8c8c8;

        }

        .c-input input:focus{
            border: 2px solid #8a8a8a;
        }


        .c-select {
            height: 5vh;
            width: 100%;
            border-radius: 10px;
            padding: 8px;
            outline:none;
            border: 2px solid #c8c8c8;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
        }

        select::-ms-expand { display: none; }

        .c-select option{
            margin: 100px;
            width: 140px;
            height: 40px;
            border: 1px solid red;
            position: relative;
        }




    </style>
    <body id="page-top">
        <main id="mainbody" style="height: 100%">
            <div class="box">
                <ul class="nav nav-pills" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">充值</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">注册</a></li>
                    <li role="presentation"><a href="#query" aria-controls="query" role="tab" data-toggle="tab">查询</a></li>
                </ul>

                <div class="tab-content " >
                    <div role="tabpanel" class="tab-pane  active" id="home">
                        <div class="box-pane">
                            <div class="c-input">
                                <input type="text" placeholder="输入充值账号" name="account" id="account">
                            </div>
                            <div class="c-input">
                                <input type="text" placeholder="输入充值卡密" name="code" id="code">
                            </div>
                            <div class="c-button" id="submit">充值</div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane box-pane" id="profile">
                        <div class="box-pane">
                            <div class="c-input">
                                <input type="text" placeholder="输入账号" id="reg-account">
                            </div>
                            <div class="c-input">
                                <input type="text" placeholder="输入密码" id="reg-password">
                            </div>
                            <div class="c-input">
                                <input type="text" placeholder="输入卡密" id="reg-code">
                            </div>
                            <div class="c-input">
                                <input type="text" placeholder="输入QQ" id="reg-qq">
                            </div>
                            <div class="c-button" id="register">注册</div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane box-pane" id="query">
                        <div class="box-pane">
                            <select class="c-select" name="app_id" id="app_id">
                                <option value="" style="display: none;" disabled selected>选择一个应用</option>
                                <?php if(is_array($apps) || $apps instanceof \think\Collection || $apps instanceof \think\Paginator): if( count($apps)==0 ) : echo "" ;else: foreach($apps as $k=>$v): ?>
                                <option value="<?php echo $v['id']; ?>"><?php echo $v['name']; ?></option>
                                <?php endforeach; endif; else: echo "" ;endif; ?>
                            </select>

                            <div class="c-input">
                                <input type="text" placeholder="输入查询账号" id="query-account">
                            </div>

                            <div id="expTime" style="display: none"></div>

                            <div class="c-button" id="_query">查询</div>
                        </div>
                    </div>
                </div>

            </div>
        </main>
        <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
        <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="https://www.jq22.com/demo/Message202012080007/js/message.min.js"></script>
        <script>

            $("#submit").click(function () {
                let account = $("#account").val();
                let code = $("#code").val();
                if (account.length < 2) {
                    return Qmsg.info("账号长度不得小于2位")
                }
                if (code.length < 1) {
                	return Qmsg.info("卡密不得为空")
                }
                if(code.length > 32) {
                    return Qmsg.info("卡密长度最大为32位")
                }

                $.post("/index/card/", [{"name" : "account", "value": account}, {"name": "code", "value": code}], function (response) {
                    if (response.code === 0) {
                        return Qmsg.error(response.msg)
                    }else {
                        $("#code").val("");
                        return Qmsg.success(response.msg, 2000)
                    }
                })
            })


            $("#register").click(function () {
                let account = $("#reg-account").val();
                let code = $("#reg-code").val();
                let password = $("#reg-password").val();
                let qq = $("#reg-qq").val();
                if (account.length < 2) {
                    return Qmsg.info("账号长度不得小于2位")
                }

                if (password.length < 3) {
                    return Qmsg.info("密码长度不得小于3位")
                }

                if (code.length < 1) {
                    return Qmsg.info("卡密长度最小为1位")
                }
                if (code.length > 32) {
                    return Qmsg.info("卡密长度最大为32位")
                }
                
                if(qq.length < 5 || qq.length > 12) {
                	return Qmsg.info("QQ长度有误")
                }

                $.post("/index/card/register", [{"name" : "account", "value": account}, {"name": "code", "value": code}, {"name": "password", "value": password}, {'name': 'qq', 'value' : qq}], function (response) {
                    if (response.code === 0) {
                        return Qmsg.error(response.msg)
                    }else {
                        $("#reg-code").val("");
                        return Qmsg.success(response.msg, 2000)
                    }
                })
            })


            $("#_query").click(function () {
                let account = $("#query-account").val();
                let appId = $('#app_id').val();


                if (account.length < 2) {
                    return Qmsg.info("账号长度不得小于2位")
                }

                if (appId <= 0) {
                    return Qmsg.info("请选择一个应用")
                }

                $.post("/index/card/query", [{"name" : "account", "value": account}, {'name': "appId", "value": appId}], function (response) {
                    if (response.code === 0) {
                        $("#expTime").hide();
                        return Qmsg.error(response.msg)
                    }else {
                        $("#expTime").text('到期时间：' + response.data.date).show();
                        return Qmsg.success(response.msg, 2000)
                    }
                })
            })
        </script>
    </body>
</html>
